<script setup lang="ts">
import '@/style/WriteUp.css'
import {fetchWebInformation} from "@/static/utils/fetch_ctf_web_info";
import {onBeforeMount, ref} from "vue";
import {useUserStore} from "@/stores/userStore";

const ctfWebData = ref([])

onBeforeMount(async () => {
  await fetchWebInformation()
  const userStore = useUserStore()
  ctfWebData.value = userStore.ctfWebData
  for (const item of ctfWebData.value) {
    item.url = `/WriteUp/web/${item.title}`
  }
})

</script>

<template>
  <div class="wp-all">
    <el-container>
      <el-aside width="20%" class="wp-aside">
        <div class="wp-aside-title">
          <span>WriteUp</span>
        </div>

        <section class="wp-aside-menu">
          <p class="wp-aside-menu__title">Web</p>
          <div v-for="item in ctfWebData"
               :key="item.title"
              class="wp-aside-menu__item">
            <RouterLink :to="item.url">{{ item.title }}</RouterLink>
          </div>

        </section>


      </el-aside>

      <el-main class="wp-main">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>
